import React, { useEffect, useState, useRef } from 'react';
import Router, { withRouter } from '@/router/renderRouter';
import { Button, message,  Modal, Input, Select, } from 'antd';
import { useSyncCallback, deepclone } from '@/utils'
import Index from "./Index/index";
import Info from "./Info/index";
import Log from "./Log/index";
import BalanceHistory from "./BalanceHistory/index";
import TransferRecord from "./TransferRecord/index";
import './index.scss'; 

import { 
  recharge,
  draw,
  checkTransPwd,
} from '@/api/member'
const Manage = (props) => {
  const initValue = {
    "amount": "",
    "paymentType": "",
    "remark": "",
    "transPwd": ""
  }
  const indexRef = useRef(null)
  const infoRef = useRef(null)
  const logRef = useRef(null)
  const balanceHistoryRef = useRef(null)
  const transferRecordRef = useRef(null)
  
  const [pageType, setPageType] = useState('index');
  const [params, setParams] = useState(null);
  const [memberInfo, setmemberInfo] = useState(null);
  const [transPwd, setTransPwd] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalParams, setModalParams] = useState(initValue);
  
  const checkTransPwdFn = async () => {
    try {
      let res = await checkTransPwd()
      if(res.code === 0) {
        setTransPwd(res.data)
      }
    } catch(error) {
      console.log(error)
    }
  }
  const handle = async () => {
    try {
      if(!modalParams.amount && modalParams.amount!==0){
        message.warning('请输入金额')
        return false
      }
      if(!modalParams.type){
        message.warning('请选择修改类型')
        return false
      }
      if(!modalParams.paymentType){
        message.warning('请选择修改方式')
        return false
      }
      if(transPwd && !modalParams.transPwd){
        message.warning('请输入交易密码')
        return false
      }
      if(!modalParams.remark){
        message.warning('请输入备注')
        return false
      }
      let param = {
        userId: memberInfo.id,
        ...modalParams,
      }
      let res = modalParams.type === '1' ? await recharge(param) : await draw(param)
      if(res.code === 0) {
        message.success('修改成功')
        if(pageType === 'info'){
          infoRef.current.searchData()
        }
        if(pageType === 'index'){
          indexRef.current.handleFinish()
        }
        setModalParams(initValue)
        setIsModalOpen(false)
      }
    } catch(error) {
      console.log(error)
    }
  }
  const changeValue = (name,val) => {
    const obj = deepclone(modalParams)
    obj[name] = val
    setModalParams(obj)
  }
  const open = (obj) => {
    setModalParams(initValue)
    setmemberInfo(obj)
    setIsModalOpen(true)
  }
  const close = () => {
    setModalParams(initValue)
    setmemberInfo({})
    setIsModalOpen(false)
  }
  useEffect(() => {
    checkTransPwdFn()
    return () => { 
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  } , [])
  
  return (
    <>
      {
        pageType === 'index'
        ?
        <Index ref={indexRef} setParams={setParams}  open={open} setPageType={setPageType} />
        :
        ''
      }
      {
        pageType === 'info'
        ?
        <Info ref={infoRef} params={params} setParams={setParams} open={open} setPageType={setPageType} />
        :
        ''
      }
      {
        pageType === 'log'
        ?
        <Log ref={logRef} params={params} setParams={setParams} setPageType={setPageType} />
        :
        ''
      }
      {
        pageType === 'balanceHistory'
        ?
        <BalanceHistory ref={balanceHistoryRef} params={params} setParams={setParams} setPageType={setPageType} />
        :
        ''
      }
      {
        pageType === 'transferRecordRef'
        ?
        <TransferRecord ref={transferRecordRef} params={params} setParams={setParams} setPageType={setPageType} />
        :
        ''
      }
      <Modal title="修改余额" visible={isModalOpen} onCancel={close}
      	footer={[
      	  <Button type="primary" style={{marginLeft: '20px'}} onClick={()=>{handle()}}>确认</Button>,
      	]}
      >
        <div className="line">
          <span className="left">会员账号：</span>
          <span className="right">{memberInfo&&memberInfo.username}</span>
        </div>
        <div className="line">
          <span className="left"><span className="red">*</span>  金额：</span>
          <span className="right">
            <Input style={{width: '250px'}} value={modalParams.amount} onChange={(e)=>{changeValue('amount',e.target.value)}} />
          </span>
        </div>
        <div className="line">
          <span className="left"><span className="red">*</span>  类型：</span>
          <span className="right">
            <Select 
              value={modalParams.type}
              style={{width: '100px'}}
              onChange={(e)=>{changeValue('type',e)}}
              options={[
                {label:'存款',value:'1'},
                {label:'提款',value:'2'},
              ]} 
            />
            <span>&nbsp;>&nbsp;</span>
            <Select
              value={modalParams.paymentType}
              style={{width: '100px'}}
              onChange={(e)=>{changeValue('paymentType',e)}}
              options={[
                {label:'手动上分',value:'SDSF'},
                {label:'余额纠正',value:'YEJZ'},
              ]}
            />
          </span>
        </div>
        {
          transPwd
          ?
          <div className="line">
            <span className="left"><span className="red">*</span>  交易密码：</span>
            <span className="right">
              <Input.Password style={{width: '250px'}} value={modalParams.transPwd} onChange={(e)=>{changeValue('transPwd',e.target.value)}} />
            </span>
          </div>
          :
          ''
        }
        
        <div className="line">
          <span className="left"><span className="red">*</span>  备注：</span>
          <span className="right">
            <Input.TextArea
              style={{width: '250px'}}
              value={modalParams.remark}
              onChange={(e)=>{changeValue('remark',e.target.value)}}
             />
          </span>
        </div>
      </Modal>
    </>
  )
}
export default withRouter(Manage)